<template>
  <div class="user-info">
    <div class="collapse">
      <span>{{ $t("component.userInfo.1") }}</span>
      <span>{{ user.username }}</span>
    </div>
    <el-collapse accordion>
      <el-collapse-item>
        <template slot="title"> {{ $t("component.userInfo.2") }}</template>
        <el-form label-position="top">
          <el-form-item :label="$t('component.userInfo.3')">
            <el-upload class="avatar-uploader" :action="uploadUrl" :show-file-list="false" :on-success="handleAvatarSuccess">
              <img v-if="user.avatar" :src="domain + user.avatar" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <el-button type="primary" @click="handleUpdate">{{ $t("component.userInfo.4") }}</el-button>
          </el-form-item>
        </el-form>
      </el-collapse-item>
      <el-collapse-item :title="$t('component.userInfo.5')">
        <el-form label-position="top">
          <el-form-item :label="$t('component.userInfo.5')">
            <el-input v-model="user.mobile"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleUpdate">{{ $t("component.userInfo.4") }}</el-button>
          </el-form-item>
        </el-form>
      </el-collapse-item>
      <el-collapse-item :title="$t('component.userInfo.6')">
        <el-form label-position="top">
          <el-form-item :label="$t('component.userInfo.6')">
            <el-input v-model="user.no"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleUpdate">{{ $t("component.userInfo.4") }}</el-button>
          </el-form-item>
        </el-form>
      </el-collapse-item>
      <el-collapse-item :title="$t('component.userInfo.9')">
        <el-form label-position="top">
          <el-form-item :label="$t('component.userInfo.9')" prop="area">
            <el-cascader ref="area" v-model="user.areaCode" :options="multiOptions" :props="{ value: 'code', label: 'name' }" style="width: 100%" @change="handleMultiChange"></el-cascader>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleUpdate">{{ $t("component.userInfo.4") }}</el-button>
          </el-form-item>
        </el-form>
      </el-collapse-item>
      <el-collapse-item :title="$t('component.userInfo.8')">
        <el-form label-position="top">
          <el-form-item :label="$t('component.userInfo.8')">
            <el-input v-model="user.email" readonly></el-input>
          </el-form-item>
        </el-form>
      </el-collapse-item>
      <!-- 更改密码 -->
      <el-collapse-item :title="$t('component.login.4')">
        <el-form label-position="top">
          <el-form ref="sendForm" :model="sendForm" :rules="rules" label-position="top">
            <el-form-item :label="$t('component.login.5')" prop="oldPassword">
              <el-input type="text" v-model="sendForm.oldPassword" :placeholder="$t('component.login.4')"></el-input>
            </el-form-item>
            <el-form-item label="Nova senha" prop="newPassword">
              <el-input type="text" v-model="sendForm.newPassword" placeholder="Por favor, insira UMA Nova senha"></el-input>
            </el-form-item>
            <el-form-item label="Confirmar Nova senha" prop="verifyPassword">
              <el-input type="text" v-model="sendForm.verifyPassword" placeholder="Confirmar Nova senha"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleSubmit">enviar</el-button>
            </el-form-item>
          </el-form>
        </el-form>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>
<script>
import Api from "@/api";
import { Domain } from "@/constants";
export default {
  name: "UserInfo",
  data() {
    return {
      uploadUrl: Api.uploadUrl,
      domain: Domain,
      user: {},
      multiOptions: [],
      sendForm: {
        code: "",
        password: "",
        confirmPassword: "",
      },
      rules: {
        oldPassword: [{ required: true, trigger: "blur" }],
        newPassword: [{ required: true, trigger: "blur" }],
        verifyPassword: [{ required: true, trigger: "blur" }],
      },
    };
  },
  created() {
    this.loadUserInfo();
    this.loadTree();
  },
  methods: {
    loadUserInfo() {
      Api.loadUser().then((res) => {
        this.user = res;
        console.log(this.user);
        this.user.areaCode = this.user.areaCode.split("/");
        this.user.areaCode.splice(0, 1);
        this.user.areaCode.splice(this.user.areaCode.length - 1, 1);
      });
    },
    handleAvatarSuccess(file) {
      this.user.avatar = file.path;
    },
    handleUpdate() {
      this.user.areaCode = "/" + this.user.areaCode.join("/") + "/";
      Api.updateUser({ ...this.user, locked: 0 }).then((res) => {
        this.$message.success("success");
        this.$emit("changeUser", this.user);
        this.loadUserInfo();
      });
    },
    loadTree() {
      Api.areaTree().then((res) => {
        this.multiOptions = res;
      });
    },
    handleMultiChange(value) {
      this.user.area = value;
      this.user.areaName = this.$refs.area.getCheckedNodes()[0].pathLabels.join("/");
    },
    // 修改密码
    handleSubmit() {
      this.$refs.sendForm.validate((valid) => {
        if (valid) {
          Api.doUpdatePassword(this.sendForm).then((res) => {
            this.$message.success("success");
            //重置密码成功
          });
        } else {
          // this.$message.info('请填写必填信息')
          return false;
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.user-info {
  .avatar-uploader {
    ::v-deep .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      &:hover {
        border-color: #fb8c24;
      }
      .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 80px;
        height: 80px;
        line-height: 80px;
        text-align: center;
      }
      .avatar {
        width: 80px;
        height: 80px;
        display: block;
      }
    }
  }
  /* collapse */
  .collapse {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
    height: 49px;
    color: #595959;
    font-size: 16px;
    padding: 0 20px;
    box-sizing: border-box;
    margin-bottom: 20px;
  }
  ::v-deep .el-collapse-item {
    margin-bottom: 20px;
    .el-collapse-item__header {
      padding: 0 20px;
      color: #595959;
      font-size: 16px;
      &.is-active {
        border-bottom-color: #e8e8e8;
      }
    }
    .el-collapse-item__content {
      padding: 20px;
    }
  }
}
</style>
